<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>发现好物 - 社交商城</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            padding-bottom: 65px;
        }
        
        /* 顶部导航 */
        .top-nav {
            background-color: white;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .search-container {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 8px;
            border: 1px solid #eee;
            background-color: #f5f5f5;
            font-size: 14px;
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 16px;
        }
        
        /* 筛选区域 */
        .filter-container {
            background-color: white;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 60px;
            z-index: 99;
        }
        
        /* 主筛选栏 */
        .main-filter-bar {
            padding: 8px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            overflow-x: auto;
            scrollbar-width: none;
        }
        
        .main-filter-bar::-webkit-scrollbar {
            display: none;
        }
        
        .filter-btn {
            display: flex;
            align-items: center;
            color: #666;
            font-size: 14px;
            padding: 5px 10px;
            border-radius: 4px;
            background: none;
            border: none;
            white-space: nowrap;
            margin-right: 8px;
        }
        
        .filter-btn:last-child {
            margin-right: 0;
        }
        
        .filter-btn i {
            margin-left: 5px;
            font-size: 12px;
        }
        
        .filter-btn.active {
            color: #ff4d4f;
            background-color: #fff1f0;
        }
        
        /* 高级筛选区域 */
        .advanced-filters {
            padding: 10px 16px;
            border-top: 1px solid #eee;
            display: none;
        }
        
        .advanced-filters.show {
            display: block;
        }
        
        .filter-section {
            margin-bottom: 12px;
        }
        
        .filter-section-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #333;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-option {
            background-color: #f5f5f5;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 5px 12px;
            font-size: 13px;
            color: #666;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .filter-option.active {
            background-color: #ff4d4f;
            color: white;
            border-color: #ff4d4f;
        }
        
        .price-range {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }
        
        .price-input {
            flex: 1;
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid #eee;
            font-size: 13px;
        }
        
        .price-input::placeholder {
            color: #999;
        }
        
        .price-separator {
            display: flex;
            align-items: center;
            color: #999;
        }
        
        /* 视图切换和筛选按钮 */
        .view-and-filter {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .view-toggle {
            display: flex;
            gap: 8px;
            background-color: #f5f5f5;
            border-radius: 4px;
            padding: 2px;
        }
        
        .view-btn {
            width: 30px;
            height: 30px;
            border-radius: 4px;
            background: none;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
        }
        
        .view-btn.active {
            background-color: white;
            color: #ff4d4f;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .advanced-filter-toggle {
            background: none;
            border: none;
            color: #666;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        
        .advanced-filter-toggle i {
            margin-right: 5px;
        }
        
        /* 筛选结果提示 */
        .filter-result {
            padding: 10px 16px;
            font-size: 13px;
            color: #666;
            background-color: #fff8f8;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .result-count {
            display: flex;
            align-items: center;
        }
        
        .result-count i {
            color: #ff4d4f;
            margin-right: 5px;
        }
        
        .clear-filters {
            color: #999;
            font-size: 12px;
            background: none;
            border: none;
            display: flex;
            align-items: center;
        }
        
        .clear-filters i {
            margin-right: 3px;
        }
        
        /* 商品列表容器 */
        .products-container {
            padding: 8px;
        }
        
        /* 列表视图 */
        .products-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        /* 网格视图 */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        /* 商品卡片基础样式 */
        .product-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            text-decoration: none;
            color: #333;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .product-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        /* 列表视图卡片样式 */
        .list-view .product-card {
            display: flex;
            height: 120px;
        }
        
        /* 网格视图卡片样式 */
        .grid-view .product-card {
            flex-direction: column;
            height: auto;
        }
        
        /* 商品图片容器 */
        .product-images {
            position: relative;
            flex-shrink: 0;
        }
        
        /* 列表视图图片 */
        .list-view .product-images {
            width: 120px;
            height: 120px;
        }
        
        /* 网格视图图片 */
        .grid-view .product-images {
            width: 100%;
            padding-top: 100%; /* 1:1 比例 */
        }
        
        /* 无图样式 */
        .no-image {
            background-color: #fafafa;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ddd;
        }
        
        .no-image i {
            font-size: 40px;
        }
        
        /* 单图样式 */
        .single-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* 多图样式 */
        .multi-images {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 2px;
        }
        
        .multi-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .multi-images .more-images {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 50%;
            height: 50%;
            background-color: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 500;
        }
        
        /* 商品标签（如新品、热销） */
        .product-badge {
            position: absolute;
            top: 6px;
            left: 6px;
            background-color: #ff4d4f;
            color: white;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 4px;
            z-index: 10;
        }
        
        /* 商品信息容器 */
        .product-info {
            padding: 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .grid-view .product-info {
            padding: 10px;
        }
        
        /* 商品标题 */
        .product-title {
            font-size: 15px;
            font-weight: 500;
            line-height: 1.4;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .grid-view .product-title {
            font-size: 13px;
            -webkit-line-clamp: 3;
        }
        
        /* 商品描述/标签 */
        .product-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 8px;
            flex-grow: 1;
        }
        
        .product-tag {
            font-size: 12px;
            color: #666;
            background-color: #f5f5f5;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        .grid-view .product-tags {
            margin-bottom: 5px;
        }
        
        /* 价格区域 */
        .product-price {
            font-size: 16px;
            font-weight: 600;
            color: #ff4d4f;
            margin-bottom: 4px;
        }
        
        .grid-view .product-price {
            font-size: 15px;
        }
        
        .original-price {
            font-size: 12px;
            color: #999;
            text-decoration: line-through;
            margin-left: 5px;
        }
        
        /* 额外信息 */
        .product-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #999;
        }
        
        .sales-count {
            display: flex;
            align-items: center;
        }
        
        .sales-count i {
            font-size: 10px;
            margin-right: 3px;
        }
        
        .shop-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80px;
        }
        
        .grid-view .product-meta {
            margin-top: auto;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 6px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            text-decoration: none;
            font-size: 10px;
        }
        
        .nav-item.active {
            color: #ff4d4f;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 3px;
        }
        
        /* 加载更多 */
        .load-more {
            padding: 15px;
            text-align: center;
        }
        
        .load-more-btn {
            background-color: white;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 8px 16px;
            font-size: 14px;
            color: #666;
            cursor: pointer;
        }
        
        .load-more-btn:hover {
            background-color: #f5f5f5;
        }
        
        /* 空状态 */
        .empty-state {
            padding: 60px 20px;
            text-align: center;
            color: #999;
        }
        
        .empty-state i {
            font-size: 60px;
            margin-bottom: 15px;
            color: #eee;
        }
        
        /* 加载状态 */
        .loading-state {
            padding: 40px 20px;
            text-align: center;
        }
        
        .loading-spinner {
            width: 30px;
            height: 30px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #ff4d4f;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="list-view">
    <!-- 顶部导航 -->
    <div class="top-nav">
        <div class="search-container">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索商品、店铺或标签...">
        </div>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filter-container">
        <!-- 主筛选栏 -->
        <div class="main-filter-bar">
            <button class="filter-btn active">
                推荐 <i class="fas fa-chevron-down"></i>
            </button>
            <button class="filter-btn">
                最新 <i class="fas fa-chevron-down"></i>
            </button>
            <button class="filter-btn">
                价格 <i class="fas fa-chevron-down"></i>
            </button>
            <button class="filter-btn">
                销量 <i class="fas fa-chevron-down"></i>
            </button>
            <button class="filter-btn">
                评分 <i class="fas fa-chevron-down"></i>
            </button>
            <div class="view-and-filter">
                <div class="view-toggle">
                    <button class="view-btn active" id="list-view-btn">
                        <i class="fas fa-list"></i>
                    </button>
                    <button class="view-btn" id="grid-view-btn">
                        <i class="fas fa-th"></i>
                    </button>
                </div>
                <button class="advanced-filter-toggle" id="advanced-filter-toggle">
                    <i class="fas fa-sliders-h"></i> 筛选
                </button>
            </div>
        </div>
        
        <!-- 高级筛选区域 -->
        <div class="advanced-filters" id="advanced-filters">
            <!-- 分类筛选 -->
            <div class="filter-section">
                <div class="filter-section-title">商品分类</div>
                <div class="filter-options">
                    <div class="filter-option active">全部</div>
                    <div class="filter-option">电子数码</div>
                    <div class="filter-option">服装鞋帽</div>
                    <div class="filter-option">家居用品</div>
                    <div class="filter-option">美妆个护</div>
                    <div class="filter-option">食品饮料</div>
                    <div class="filter-option">文具办公</div>
                </div>
            </div>
            
            <!-- 价格筛选 -->
            <div class="filter-section">
                <div class="filter-section-title">价格范围</div>
                <div class="filter-options">
                    <div class="filter-option active">全部</div>
                    <div class="filter-option">0-50元</div>
                    <div class="filter-option">50-100元</div>
                    <div class="filter-option">100-300元</div>
                    <div class="filter-option">300-500元</div>
                    <div class="filter-option">500元以上</div>
                </div>
                <div class="price-range">
                    <input type="number" class="price-input" placeholder="最低价" min="0">
                    <div class="price-separator">-</div>
                    <input type="number" class="price-input" placeholder="最高价" min="0">
                </div>
            </div>
            
            <!-- 特色筛选 -->
            <div class="filter-section">
                <div class="filter-section-title">特色标签</div>
                <div class="filter-options">
                    <div class="filter-option">新品</div>
                    <div class="filter-option">热销</div>
                    <div class="filter-option">限时折扣</div>
                    <div class="filter-option">官方正品</div>
                    <div class="filter-option">包邮</div>
                    <div class="filter-option">支持退换</div>
                </div>
            </div>
            
            <!-- 筛选按钮 -->
            <div class="d-flex gap-4 pt-4">
                <button class="btn btn-light flex-1" id="cancel-filter">取消</button>
                <button class="btn btn-danger flex-1" id="confirm-filter">确认筛选</button>
            </div>
        </div>
    </div>
    
    <!-- 筛选结果提示 -->
    <div class="filter-result">
        <div class="result-count">
            <i class="fas fa-box"></i> 找到 24 件商品
        </div>
        <button class="clear-filters" id="clear-filters">
            <i class="fas fa-times"></i> 清除筛选
        </button>
    </div>
    
    <!-- 商品列表容器 -->
    <div class="products-container" id="products-container">
        <!-- 1. 无图商品 -->
        <a href="#" class="product-card" data-category="文具办公" data-price="59" data-sales="238" data-rating="4.7" data-tags="文具,定制,创意">
            <div class="product-images no-image">
                <i class="fas fa-box"></i>
                <div class="product-badge">新品</div>
            </div>
            <div class="product-info">
                <h3 class="product-title">限量版 创意设计 个性定制 手写笔记本 可定制封面</h3>
                <div class="product-tags">
                    <span class="product-tag">文具</span>
                    <span class="product-tag">定制</span>
                    <span class="product-tag">创意</span>
                </div>
                <div class="product-price">
                    ¥59.00 <span class="original-price">¥79.00</span>
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 238
                    </div>
                    <div class="shop-name">创意文具坊</div>
                </div>
            </div>
        </a>
        
        <!-- 2. 单图商品 -->
        <a href="#" class="product-card" data-category="电子数码" data-price="299" data-sales="1256" data-rating="4.9" data-tags="电子,耳机,降噪">
            <div class="product-images single-image">
                <img src="https://picsum.photos/id/26/400/400" alt="无线蓝牙耳机">
                <div class="product-badge">热销</div>
            </div>
            <div class="product-info">
                <h3 class="product-title">无线蓝牙耳机 主动降噪 长续航 高清通话 运动防水</h3>
                <div class="product-tags">
                    <span class="product-tag">电子</span>
                    <span class="product-tag">耳机</span>
                    <span class="product-tag">降噪</span>
                </div>
                <div class="product-price">
                    ¥299.00 <span class="original-price">¥399.00</span>
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 1256
                    </div>
                    <div class="shop-name">数码生活馆</div>
                </div>
            </div>
        </a>
        
        <!-- 3. 多图商品 (3张) -->
        <a href="#" class="product-card" data-category="服装鞋帽" data-price="89" data-sales="3562" data-rating="4.8" data-tags="服装,T恤,夏季">
            <div class="product-images">
                <div class="multi-images">
                    <img src="https://picsum.photos/id/96/400/400" alt="纯棉T恤图片1">
                    <img src="https://picsum.photos/id/21/400/400" alt="纯棉T恤图片2">
                    <img src="https://picsum.photos/id/22/400/400" alt="纯棉T恤图片3">
                    <div class="more-images">+3</div>
                </div>
                <div class="product-badge">限时折扣</div>
            </div>
            <div class="product-info">
                <h3 class="product-title">夏季纯棉短袖T恤 宽松版型 多色可选 男女同款 透气舒适</h3>
                <div class="product-tags">
                    <span class="product-tag">服装</span>
                    <span class="product-tag">T恤</span>
                    <span class="product-tag">夏季</span>
                </div>
                <div class="product-price">
                    ¥89.00
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 3562
                    </div>
                    <div class="shop-name">潮流服饰店</div>
                </div>
            </div>
        </a>
        
        <!-- 4. 单图商品 -->
        <a href="#" class="product-card" data-category="家居用品" data-price="69" data-sales="542" data-rating="4.6" data-tags="家居,陶瓷,手工">
            <div class="product-images single-image">
                <img src="https://picsum.photos/id/42/400/400" alt="手工咖啡杯">
            </div>
            <div class="product-info">
                <h3 class="product-title">手工陶瓷咖啡杯 带盖带勺 大容量马克杯 创意礼品</h3>
                <div class="product-tags">
                    <span class="product-tag">家居</span>
                    <span class="product-tag">陶瓷</span>
                    <span class="product-tag">手工</span>
                </div>
                <div class="product-price">
                    ¥69.00 <span class="original-price">¥99.00</span>
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 542
                    </div>
                    <div class="shop-name">匠心家居</div>
                </div>
            </div>
        </a>
        
        <!-- 5. 多图商品 (2张) -->
        <a href="#" class="product-card" data-category="电子数码" data-price="399" data-sales="876" data-rating="4.9" data-tags="数码,智能设备,运动">
            <div class="product-images">
                <div class="multi-images">
                    <img src="https://picsum.photos/id/65/400/400" alt="智能手表图片1">
                    <img src="https://picsum.photos/id/68/400/400" alt="智能手表图片2">
                </div>
                <div class="product-badge">官方正品</div>
            </div>
            <div class="product-info">
                <h3 class="product-title">智能手表 心率监测 运动计步 睡眠分析 超长待机</h3>
                <div class="product-tags">
                    <span class="product-tag">数码</span>
                    <span class="product-tag">智能设备</span>
                    <span class="product-tag">运动</span>
                </div>
                <div class="product-price">
                    ¥399.00 <span class="original-price">¥499.00</span>
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 876
                    </div>
                    <div class="shop-name">智能生活</div>
                </div>
            </div>
        </a>
        
        <!-- 6. 无图商品 -->
        <a href="#" class="product-card" data-category="食品饮料" data-price="168" data-sales="198" data-rating="4.5" data-tags="食品,蛋糕,定制">
            <div class="product-images no-image">
                <i class="fas fa-gift"></i>
                <div class="product-badge">包邮</div>
            </div>
            <div class="product-info">
                <h3 class="product-title">定制生日蛋糕 创意设计 新鲜水果 动物奶油 同城配送</h3>
                <div class="product-tags">
                    <span class="product-tag">食品</span>
                    <span class="product-tag">蛋糕</span>
                    <span class="product-tag">定制</span>
                </div>
                <div class="product-price">
                    ¥168.00
                </div>
                <div class="product-meta">
                    <div class="sales-count">
                        <i class="fas fa-shopping-cart"></i> 已售 198
                    </div>
                    <div class="shop-name">甜蜜时光</div>
                </div>
            </div>
        </a>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn" id="load-more-btn">
            加载更多 <i class="fas fa-spinner fa-spin" style="display: none;"></i>
        </button>
    </div>
    
    <!-- 空状态（默认隐藏） -->
    <div class="empty-state" id="empty-state" style="display: none;">
        <i class="fas fa-search"></i>
        <h5>未找到相关商品</h5>
        <p>尝试调整筛选条件或搜索关键词</p>
    </div>
    
    <!-- 加载状态（默认隐藏） -->
    <div class="loading-state" id="loading-state" style="display: none;">
        <div class="loading-spinner"></div>
        <p>正在加载商品...</p>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-search"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-shopping-cart"></i>
            <span>购物车</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-heart"></i>
            <span>收藏</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const listViewBtn = document.getElementById('list-view-btn');
            const gridViewBtn = document.getElementById('grid-view-btn');
            const productsContainer = document.getElementById('products-container');
            const body = document.body;
            const filterBtns = document.querySelectorAll('.filter-btn');
            const advancedFilterToggle = document.getElementById('advanced-filter-toggle');
            const advancedFilters = document.getElementById('advanced-filters');
            const filterOptions = document.querySelectorAll('.filter-option');
            const confirmFilterBtn = document.getElementById('confirm-filter');
            const cancelFilterBtn = document.getElementById('cancel-filter');
            const clearFiltersBtn = document.getElementById('clear-filters');
            const loadMoreBtn = document.getElementById('load-more-btn');
            const searchInput = document.querySelector('.search-input');
            const productCards = document.querySelectorAll('.product-card');
            const emptyState = document.getElementById('empty-state');
            const loadingState = document.getElementById('loading-state');
            const resultCount = document.querySelector('.result-count');
            
            // 存储当前筛选条件
            let currentFilters = {
                sort: 'recommend',
                category: '全部',
                priceRange: '全部',
                minPrice: '',
                maxPrice: '',
                tags: [],
                search: ''
            };
            
            // 视图切换功能
            listViewBtn.addEventListener('click', function() {
                body.classList.remove('grid-view');
                body.classList.add('list-view');
                productsContainer.classList.remove('products-grid');
                productsContainer.classList.add('products-list');
                listViewBtn.classList.add('active');
                gridViewBtn.classList.remove('active');
            });
            
            gridViewBtn.addEventListener('click', function() {
                body.classList.remove('list-view');
                body.classList.add('grid-view');
                productsContainer.classList.remove('products-list');
                productsContainer.classList.add('products-grid');
                gridViewBtn.classList.add('active');
                listViewBtn.classList.remove('active');
            });
            
            // 高级筛选切换
            advancedFilterToggle.addEventListener('click', function() {
                advancedFilters.classList.toggle('show');
            });
            
            // 筛选选项点击
            filterOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 如果是同一组中的选项，移除同组其他选项的active类
                    const parentSection = this.closest('.filter-section');
                    if (parentSection.querySelector('.filter-section-title').textContent !== '特色标签') {
                        parentSection.querySelectorAll('.filter-option').forEach(opt => {
                            opt.classList.remove('active');
                        });
                    }
                    
                    // 切换当前选项的active类
                    this.classList.toggle('active');
                });
            });
            
            // 主筛选按钮点击
            filterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    filterBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 更新排序方式
                    const text = this.textContent.trim().split(' ')[0];
                    switch(text) {
                        case '推荐':
                            currentFilters.sort = 'recommend';
                            break;
                        case '最新':
                            currentFilters.sort = 'latest';
                            break;
                        case '价格':
                            currentFilters.sort = 'price';
                            break;
                        case '销量':
                            currentFilters.sort = 'sales';
                            break;
                        case '评分':
                            currentFilters.sort = 'rating';
                            break;
                    }
                    
                    applyFilters();
                });
            });
            
            // 确认筛选
            confirmFilterBtn.addEventListener('click', function() {
                // 收集分类筛选条件
                const categoryOptions = document.querySelectorAll('.filter-section:first-child .filter-option');
                categoryOptions.forEach(option => {
                    if (option.classList.contains('active')) {
                        currentFilters.category = option.textContent;
                    }
                });
                
                // 收集价格范围筛选条件
                const priceOptions = document.querySelectorAll('.filter-section:nth-child(2) .filter-option');
                priceOptions.forEach(option => {
                    if (option.classList.contains('active')) {
                        currentFilters.priceRange = option.textContent;
                    }
                });
                
                // 收集自定义价格范围
                currentFilters.minPrice = document.querySelectorAll('.price-input')[0].value.trim();
                currentFilters.maxPrice = document.querySelectorAll('.price-input')[1].value.trim();
                
                // 收集特色标签
                currentFilters.tags = [];
                const tagOptions = document.querySelectorAll('.filter-section:last-child .filter-option');
                tagOptions.forEach(option => {
                    if (option.classList.contains('active')) {
                        currentFilters.tags.push(option.textContent);
                    }
                });
                
                // 关闭高级筛选面板并应用筛选
                advancedFilters.classList.remove('show');
                applyFilters();
            });
            
            // 取消筛选
            cancelFilterBtn.addEventListener('click', function() {
                advancedFilters.classList.remove('show');
            });
            
            // 清除所有筛选
            clearFiltersBtn.addEventListener('click', function() {
                // 重置主筛选按钮
                filterBtns.forEach((btn, index) => {
                    btn.classList.toggle('active', index === 0);
                });
                
                // 重置高级筛选选项
                filterOptions.forEach((option, index) => {
                    option.classList.toggle('active', index === 0 || 
                                           (option.closest('.filter-section').querySelector('.filter-section-title').textContent === '特色标签' && !option.classList.contains('active')));
                });
                
                // 清空价格输入框
                document.querySelectorAll('.price-input').forEach(input => {
                    input.value = '';
                });
                
                // 重置搜索框
                searchInput.value = '';
                currentFilters.search = '';
                
                // 重置筛选条件
                currentFilters = {
                    sort: 'recommend',
                    category: '全部',
                    priceRange: '全部',
                    minPrice: '',
                    maxPrice: '',
                    tags: [],
                    search: ''
                };
                
                // 应用筛选
                applyFilters();
            });
            
            // 搜索功能
            searchInput.addEventListener('input', function() {
                currentFilters.search = this.value.trim().toLowerCase();
                applyFilters();
            });
            
            // 应用筛选
            function applyFilters() {
                showLoading();
                
                // 模拟筛选延迟
                setTimeout(() => {
                    let visibleCount = 0;
                    
                    productCards.forEach(card => {
                        // 获取商品数据属性
                        const category = card.dataset.category;
                        const price = parseFloat(card.dataset.price);
                        const sales = parseInt(card.dataset.sales);
                        const rating = parseFloat(card.dataset.rating);
                        const tags = card.dataset.tags.toLowerCase().split(',');
                        const title = card.querySelector('.product-title').textContent.toLowerCase();
                        const shopName = card.querySelector('.shop-name').textContent.toLowerCase();
                        
                        // 分类筛选
                        let categoryMatch = currentFilters.category === '全部' || category === currentFilters.category;
                        
                        // 价格筛选
                        let priceMatch = true;
                        if (currentFilters.priceRange !== '全部') {
                            const [min, max] = currentFilters.priceRange.replace('元', '').split('-').map(Number);
                            priceMatch = price >= min && (max ? price <= max : true);
                        }
                        
                        // 自定义价格范围筛选
                        if (currentFilters.minPrice) {
                            priceMatch = priceMatch && price >= parseFloat(currentFilters.minPrice);
                        }
                        if (currentFilters.maxPrice) {
                            priceMatch = priceMatch && price <= parseFloat(currentFilters.maxPrice);
                        }
                        
                        // 特色标签筛选
                        let tagMatch = true;
                        if (currentFilters.tags.length > 0) {
                            // 检查商品是否有对应的标签徽章
                            const badge = card.querySelector('.product-badge');
                            tagMatch = currentFilters.tags.some(tag => {
                                return badge && badge.textContent.includes(tag);
                            });
                        }
                        
                        // 搜索筛选
                        let searchMatch = true;
                        if (currentFilters.search) {
                            const searchTerm = currentFilters.search;
                            searchMatch = title.includes(searchTerm) || 
                                          tags.some(t => t.includes(searchTerm)) ||
                                          shopName.includes(searchTerm);
                        }
                        
                        // 综合判断是否显示
                        if (categoryMatch && priceMatch && tagMatch && searchMatch) {
                            card.style.display = '';
                            visibleCount++;
                        } else {
                            card.style.display = 'none';
                        }
                    });
                    
                    // 排序商品
                    sortProducts();
                    
                    // 更新结果计数
                    resultCount.innerHTML = `<i class="fas fa-box"></i> 找到 ${visibleCount} 件商品`;
                    
                    // 显示空状态或隐藏
                    if (visibleCount === 0) {
                        showEmptyState();
                    } else {
                        hideEmptyState();
                    }
                    
                    hideLoading();
                }, 500);
            }
            
            // 排序商品
            function sortProducts() {
                const visibleCards = Array.from(productCards).filter(card => card.style.display !== 'none');
                
                if (visibleCards.length <= 1) return;
                
                // 根据当前排序条件排序
                switch(currentFilters.sort) {
                    case 'price':
                        visibleCards.sort((a, b) => a.dataset.price - b.dataset.price);
                        break;
                    case 'sales':
                        visibleCards.sort((a, b) => b.dataset.sales - a.dataset.sales);
                        break;
                    case 'rating':
                        visibleCards.sort((a, b) => b.dataset.rating - a.dataset.rating);
                        break;
                    case 'latest':
                        // 这里假设最新商品在DOM中是靠后的，实际应用中应根据时间戳排序
                        visibleCards.reverse();
                        break;
                    case 'recommend':
                    default:
                        // 推荐排序（保持原顺序）
                        break;
                }
                
                // 重新排列DOM
                visibleCards.forEach(card => {
                    productsContainer.appendChild(card);
                });
            }
            
            // 加载更多功能
            loadMoreBtn.addEventListener('click', function() {
                const spinner = this.querySelector('i');
                spinner.style.display = 'inline-block';
                this.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    // 复制现有商品作为新内容（实际应用中会从服务器请求）
                    const existingCards = document.querySelectorAll('.product-card');
                    const randomIndex = Math.floor(Math.random() * existingCards.length);
                    const clone = existingCards[randomIndex].cloneNode(true);
                    
                    // 修改一些内容以模拟新商品
                    const randomId = Math.floor(Math.random() * 100);
                    const img = clone.querySelector('img');
                    if (img) {
                        img.src = `https://picsum.photos/id/${randomId}/400/400`;
                    }
                    
                    productsContainer.appendChild(clone);
                    
                    spinner.style.display = 'none';
                    this.disabled = false;
                }, 1500);
            });
            
            // 显示/隐藏加载状态
            function showLoading() {
                loadingState.style.display = 'block';
                productsContainer.style.display = 'none';
                emptyState.style.display = 'none';
            }
            
            function hideLoading() {
                loadingState.style.display = 'none';
                productsContainer.style.display = 'block';
            }
            
            // 显示/隐藏空状态
            function showEmptyState() {
                emptyState.style.display = 'block';
                productsContainer.style.display = 'none';
                loadingState.style.display = 'none';
            }
            
            function hideEmptyState() {
                emptyState.style.display = 'none';
            }
            
            // 初始化视图
            productsContainer.classList.add('products-list');
        });
    </script>
</body>
</html>

